import style from './List.less'
import { IArticleItems } from '@/types'
import { LikeO, BrowsingHistoryO, EyeO } from '@react-vant/icons';
import { Lazyload, Image, Popup } from 'react-vant';
import { Link } from 'umi';
import { GetDateToNewData } from '@/utils/index'
import React from 'react';
import Popups from '@/components/Popup'
import 'antd/dist/antd.css';
import { ShareAltOutlined } from '@ant-design/icons';
interface IProps {
    allData: IArticleItems[]
}
const List: React.FC<IProps> = ({ allData = [] }) => {
    return (
        <div className={style.content}>
            {
                allData.length > 0
                    ? allData.map((item, index) => {
                        return (
                            item.cover?
                            <ol key={index} className={style.lisbox}>
                                <Link key={item.id} to={`/article/${item.id}`}>
                                    <div className={style.tops}>
                                        <li className={style.lis}>
                                            <h2>{item.title}</h2><span className={style.spans}>|</span>&ensp;
                                            <span className={style.sps}>{GetDateToNewData(new Date(item.publishAt).getTime())}</span>&ensp;
                                            <span className={style.spans}>|</span>
                                            {/* <div className={style.divs}>{item.title} </div> */}
                                        </li>
                                    </div>
                                </Link>
                                <div className={style.box}>
                                    <Link key={item.id} to={`/article/${item.id}`}>
                                        <div className={style.imgbox}>
                                            <div className={style.imgSamllBox}>
                                                <img src={item.cover ? item.cover : '暂无图片'} className={style.Imgs} alt="" />
                                            </div>
                                        </div>
                                    </Link>
                                    <div className={style.article}>
                                        <Link key={item.id} to={`/article/${item.id}`}>
                                            <li className={style.text}>{item.summary}</li>
                                        </Link>
                                        <li className={style.twolis}>
                                            <i>
                                                <LikeO className={style.iconslikes} />
                                            </i>&ensp;
                                                <span>{item.likes}</span>&ensp;&ensp;
                                                <i>
                                                <EyeO fontSize='16px' className={style.iconsviews} />
                                            </i>&ensp;
                                                 <span>{item.views}</span>&ensp; · &ensp;
                                                 <ShareAltOutlined className={style.icons} />&emsp;
                                            <Popups ProputItem={item}></Popups>

                                        </li>
                                    </div>
                                </div>
                            </ol>
                            : <div key={item.id}></div>
                        )
                    })
                    : <div>无数据</div>
            }
        </div >
    )
}
export default List